<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>产品供应</title>
		<link rel="stylesheet" href="../../plugin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/utils.css" />
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<script src="../../plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugin/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.product {
				padding-bottom: 30px;
				min-height: 500px;
			}
			
			.product-list-container {
				padding-top: 30px;
				background: #fff;
			}
			
			.product-list-box {
				width: 180px;
				height: 190px;
				display: inline-block;
				margin-bottom: 30px;
				margin-left: 30px;
				cursor: pointer;
				border: 1px solid #f1f1f3;
			}
			.page-title{
				font-size: 18px;
			}
			.product-list-box img {
				width: 180px;
				height: 150px;
				background: #e2e2e2;
			}
			
			.product-list-box p {
				width: 180px;
				height: 40px;
				display: inline-block;
				background: #fff;
				line-height: 40px;
				text-align: center;
				font-size: 14px;
			}
			
			#productPage {
				padding-left: 30px;
			}
		</style>
	</head>

	<body>
		<div class="layui-fluid">
			<div class="layui-row header-row">

			</div>
			<div class="product">
				<div class="pageBg">
					<div class="pageBg2">
						<div class="pageBg3">
							<h3>产品供应</h3>
							<p>Supply Of Products</p>
						</div>
					</div>
				</div>

				<div class="product-list-container limit-width">
				
				</div>

			</div>

			<div class="footer-nav">

			</div>

	</body>
	<script src="../../utils/api/index.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../utils/common/index.js" type="text/javascript" charset="utf-8"></script>

</html>
<script type="text/javascript">
		$(function() {
		$.get(requestUrl.baseUrl + requestUrl.apiUrl.producttype, function(data) {
			if(data.code == 0) {

				var list = data.list;
				for(var i = 0; i < list.length; i++) {
					var id = list[i].id;
					var productName = list[i].name;
					var unique = list[i].url.substring(26)
					getList(productName, unique, productName);
					$('.product-list-container').append('<div class="product-box-list">' +
						'<h2 class="page-title">' + productName + '</h2>' +
						'<div class="product-list" id="' + unique + '"></div>' +
						'</div>')
				}

			}
		})

		function getList(productType, unique) {
			$.post(requestUrl.baseUrl + requestUrl.apiUrl.product, {
				productType: productType
			}, function(data) {
				if(data.code == 0) {

					var list = data.page.list;
					var count = data.page.totalCount;
					for(var i = 0; i < list.length; i++) {

						var id = list[i].id;
						var productName = list[i].productName;
						getImage(id, productName, unique)
					}

				}
			})
		}

		$('.product-list-container').on('click', '.product-list-box', function() {
			var id = $(this).attr('id');
			location.href = requestUrl.httpUrl + 'html/product/productDetail.html?id=' + id
		})

		function getImage(id, productName, unique) {
			$.post(requestUrl.baseUrl + requestUrl.apiUrl.getImage, {
				recordId: id,
				attachType: 'PRODUCT_PIC_401'
			}, function(data) {
				if(data.code == 0 && data.list.length > 0) {

					$('#'+unique).append('<div class="product-list-box" id="' + id + '">' +
						'<img src="' + data.list[0].url + '"/>' +
						'<p>' + productName + '</p>' +
						'</div>')
				}
			})
		}
	})
</script>